<!doctype html>
<html lang="zh" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plug System</title>
    <meta name="Description" content="Home Page of iissnan">
    <meta name="color-scheme" content="dark light">
    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
</head>

<body>
<div class="vi">
    <h1 class="animate-slide-in-down">插件系统</h1>
    <div class="quote">
        <span class="quote-line quote-line-start animate-slide-in-left"></span>
        <span class="quote-icon quote-icon-start animate-slide-in-down">
        <i class="icon icon-quotes-left"></i>
      </span>
        <p class="quote-content animate-slide-in-down">与其临渊羡鱼，不如退而结网。</p>
        <p class="quote-author animate-slide-in-down">《史记汉书》—— <em>董仲舒</em></p>
        <span class="quote-icon quote-icon-end animate-slide-in-up">
        <i class="icon icon-quotes-right"></i>
      </span>
        <span class="quote-line quote-line-end animate-slide-in-right"></span>
    </div>
    <div class="links">
        <a href="https://gitee.com/XiaoMingYu/v3-admin-vite" class="animate-slide-in-down">vite3 管理端</a>
        <a href="https://www.vovoqi.com" class="animate-slide-in-down">官网</a>
    </div>
    <div class="links">
        <a href="#" class="animate-slide-in-down">感谢</a>
        <a href="https://iissnan.com/" class="animate-slide-in-down">Iissnan</a>
        <a href="https://www.thinkphp.cn/" class="animate-slide-in-down">Thinkphp</a>
        <a href="https://cn.vuejs.org/" class="animate-slide-in-down">Vue</a>
    </div>
    <div class="location">
      <span class="location-icon animate-slide-in-up">
        <i class="icon icon-map-pin"></i>
      </span>
        <span class="location-text animate-slide-in-down">XiaMen - China</span>
    </div>
    <div class="relocating">
        Navigating to: <span class="relocate-location"></span>...
    </div>
</div>

<script src="/static/vendors/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
        var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
        var SLIDE_IN_LEFT = { left: 0 };
        var SLIDE_IN_RIGHT = { right: 0 };

        registerCheatCode();
        executeAnimations();

        function executeAnimations() {
            $.when()
                .then(animateTitle)
                .then(animateQuote)
                .then(animateLinks)
                .then(animateLocation);
        }

        function animateTitle() {
            return animate('h1', SLIDE_IN_DOWN);
        }

        function animateQuote() {
            return $.when(
                animate('.quote-line-start', SLIDE_IN_LEFT),
                animate('.quote-line-end',SLIDE_IN_RIGHT),
                animate('.quote-icon-start', SLIDE_IN_DOWN),
                animate('.quote-icon-end', SLIDE_IN_UP)
            )
                .then(function () {
                    return animate('.quote-content', SLIDE_IN_DOWN);
                })
                .then(function () {
                    return animate('.quote-author', SLIDE_IN_DOWN);
                });
        }

        function animateLinks() {
            var DELAY_STEP = 200;
            var elements = $('.links a');
            var concurrent = $.makeArray(elements)
                .map(function (element, index) {
                    return animate(element, SLIDE_IN_DOWN, index * DELAY_STEP);
                });

            return $.when.apply($, concurrent);
        }

        function animateLocation() {
            return $.when(
                animate('.location-icon', SLIDE_IN_UP),
                animate('.location-text', SLIDE_IN_DOWN)
            );
        }

        function animate(selector, properties, delay, options) {
            delay = delay || 0;
            return $(selector).delay(delay)
                .animate(properties, options)
                .promise();
        }

        function registerCheatCode() {
            $(document.body).on('keydown', function (event) {
                var KEY_B = 66;

                if (event.which === KEY_B) {
                    $('.relocate-location').text('Bookmark Page');
                    $('.relocating').css('opacity', 1);

                    window.setTimeout(function () {
                        window.location.href = '/bookmarks.html';
                    }, 1000);
                }
            });
        }
    });
</script>
</body>
</html>